<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="description" content="html template">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Asad">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>懂汪-您的浏览器标签页助手</title>

  <link rel="icon" href="assets/images/favicon.png">
  <link rel="apple-touch-icon" href="assets/images/favicon.png">
  <link rel="stylesheet" href="assets/css/all.min.css">
  <link rel="stylesheet" href="assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
  <link rel="stylesheet" href="assets/css/meanmenu.css">
  <link rel="stylesheet" href="assets/css/magnific-popup.css">
  <link rel="stylesheet" href="assets/css/nice-select.css">
  <link rel="stylesheet" href="assets/css/backtotop.css">
  <link rel="stylesheet" href="assets/css/main.css">

</head>

<body>

  <!-- Cursor start -->
  <!-- <div class="rts-cursor cursor-outer" data-default="yes" data-link="yes" data-slider="no">
    <span class="fn-cursor"></span>
  </div>
  <div class="rts-cursor cursor-inner" data-default="yes" data-link="yes" data-slider="no">
    <span class="fn-cursor">
      <span class="fn-left"></span>
      <span class="fn-right"></span>
    </span>
  </div> -->
  <!-- Cursor end -->

  <!-- back to top start -->
  <div class="progress-wrap">
    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
      <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
    </svg>
  </div>
  <!-- back to top end -->

  <!-- modal-search-start -->
  <div class="modal fade" id="search-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <a href="javascript:void(0)" type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">×</span>
    </a>
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <form>
          <input type="text" placeholder="Search here...">
          <button>
            <i class="fa fa-search"></i>
          </button>
        </form>
      </div>
    </div>
  </div>
  <!-- modal-search-end -->

  <!-- sidebar-information-area-start -->
  <div class="sidebar-info side-info">
    <div class="sidebar-logo-wrapper mb-25">
      <div class="row align-items-center">
        <div class="col-xl-6 col-8">
          <div class="sidebar-logo">
            <a href="index.html"><img src="assets/images/logo/logo-w.png" alt="logo-img"></a>
          </div>
        </div>
        <div class="col-xl-6 col-4">
          <div class="sidebar-close-wrapper text-end">
            <button class="sidebar-close side-info-close"><i class="fal fa-times"></i></button>
          </div>
        </div>
      </div>
    </div>
    <div class="sidebar-menu-wrapper fix">
      <div class="mobile-menu"></div>
    </div>
  </div>
  <div class="offcanvas-overlay"></div>
  <!-- sidebar-information-area-end -->



  <div class="has-smooth" id="has_smooth"></div>

  <div id="smooth-wrapper">
    <div id="smooth-content">
      <div class="body-wrapper">
        <main>
          <!-- breadcrumb area start -->
          <section class="breadcrumb-area bg-default" data-background="assets/images/breadcrumb/breadcrumb-bg.jpg">
            <div class="container">
              <div class="row">
                <div class="col-12">
                  <div class="breadcrumb-content text-center">
                    <h2 class="breadcrumb-title tp_has_text_reveal_anim">注册</h2>
                  </div>
                </div>
              </div>
            </div>
            <div class="breadcrumb-shape">
              <img src="assets/images/breadcrumb/shape-1.png" alt="" class="breadcrumb-shape-1" data-speed="0.9">
              <img src="assets/images/breadcrumb/shape-2.png" alt="" class="breadcrumb-shape-2" data-speed="0.8">
              <img src="assets/images/breadcrumb/shape-3.png" alt="" class="breadcrumb-shape-3" data-speed="0.9">
              <img src="assets/images/breadcrumb/circle.png" alt="" class="breadcrumb-shape-4">
            </div>
          </section>
          <!-- breadcrumb area end -->
          <a href="login.html" class="breadcrumb-link" style="color: rgb(162, 68, 250);margin-left: 40px;">返回</a>

          <!-- login area start -->
          <section class="login-area pt-140 pb-60">
            <div class="container">
              <div class="row">
                <div class="col-xl-6 col-lg-6">
                  <div class="login-img tp_fade_right">
                    <img src="assets/images/bg/login-bg.png" alt="">
                  </div>
                </div>
                <div class="col-xl-6 col-lg-6">
                  <div class="login-content tp_fade_left">
                    <span class="login-content-subtitle">欢迎来到 懂汪</span>
                    <h3 class="login-content-title">注册 懂汪</h3>
                    <!-- 注册 -->
                    <form action="#" class="login-form" id="emailLoginForm">
                      <div class="login-form-item mb-10">
                        <input type="email" placeholder="昵称">
                        <i class="fa-light fa-user"></i>
                      </div>
                      <div class="login-form-item mb-10">
                        <input type="email" placeholder="邮箱">
                        <i class="fa-light fa-envelope"></i>
                      </div>
                      <div class="login-form-item mb-25">
                        <input type="password" placeholder="密码">
                        <i class="fa-light fa-lock"></i>
                      </div>
                      <div class="login-form-item mb-25">
                        <input type="password" placeholder="再次输入密码">
                        <i class="fa-light fa-lock"></i>
                      </div>
                      <div class="login-form-item mb-10">
                        <input type="tel" placeholder="手机号">
                        <i class="fa-light fa-phone"></i>
                      </div>
                      <div class="login-form-item mb-10" style="margin-top: 25px;position: relative;">
                        <input type="text" placeholder="验证码">
                        <div id="getCodeBtn"
                          style="position: absolute;right:0;top:0px;border:1px solid #eff0f3;height:45px;line-height:45px;width:100px;text-align: center;background-color: rgb(140, 139, 140);color: white;cursor: pointer;border-radius: 10px;">
                          验证码</div>
                      </div>
                      <div class="login-form-item mb-25">
                        <button type="submit">注册</button>
                      </div>
                    </form>

                  </div>
                </div>
              </div>
            </div>
            <div class="login-shape d-none d-xl-block">
              <img src="assets/images/bg/login-shpae-1.png" alt="" class="login-shape-1" data-speed="0.8">
              <img src="assets/images/bg/login-shpae-2.png" alt="" class="login-shape-2" data-speed="0.8">
              <img src="assets/images/bg/login-shpae-3.png" alt="" class="login-shape-3" data-speed="0.8">
            </div>
          </section>
          <!-- login area end -->
        </main>
      </div>
    </div>
  </div>


  <!-- jQuery Js -->
  <script src="assets/js/jquery-3.6.0.min.js"></script>
  <script src="assets/js/bootstrap.bundle.min.js"></script>
  <script src="assets/js/swiper-bundle.min.js"></script>
  <script src="assets/js/meanmenu.min.js"></script>
  <script src="assets/js/gsap.min.js"></script>
  <script src="assets/js/ScrollSmoother.min.js"></script>
  <script src="assets/js/ScrollTrigger.min.js"></script>
  <script src="assets/js/TweenMax.min.js"></script>
  <script src="assets/js/SplitText.min.js"></script>
  <script src="assets/js/chroma.min.js"></script>
  <script src="assets/js/magnific-popup.min.js"></script>
  <script src="assets/js/nice-select.min.js"></script>
  <script src="assets/js/backtotop.js"></script>
  <script src="assets/js/main.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <script>
    // 获取邮箱登录表单
    var emailLoginForm = document.getElementById('emailLoginForm');
    // 获取手机号登录表单
    var phoneLoginForm = document.getElementById('phoneLoginForm');
    // 获取获取验证码按钮
    var getCodeBtn = document.getElementById('getCodeBtn');
    // 定义倒计时时长（以秒为单位）
    var countdownSeconds = 59;

    // 定义计时器变量
    var countdownTimer;
    // 监听表单提交事件
    emailLoginForm.addEventListener('submit', function (event) {

    })


    // 给获取验证码按钮添加点击事件监听器
    getCodeBtn.addEventListener('click', function (event) {
      swal("验证码已发送", "请在手机上查看", "success");
      event.preventDefault();
      if (getCodeBtn.disabled) {
        return;
      }
      getCodeBtn.disabled = true;
      countdownTimer = setInterval(updateCountdown, 1000);

      function updateCountdown() {
        if (countdownSeconds <= 0) {
          clearInterval(countdownTimer);
          getCodeBtn.innerText = '验证码';
          getCodeBtn.disabled = false;
          countdownSeconds = 59; // 或者您想要的初始秒数
        } else {
          getCodeBtn.innerText = (countdownSeconds--) + ' 秒后重新';
        }
      }
    });
  </script>
</body>

</html>